<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- <script src="./test.js" ></script> -->
<style>
    html,
    body {
        height: 2000px;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .father {
        height: 100%;
        background-color: skyblue;
        position: relative;
    }

    .son {
        height: 100px;
        /* width: 500px; */
        background-color: red;
        /* height: 100%; */
    }

    .son2 {
        width: 100%;
        background-color: yellow;
        /* height: 100%; */
        position: absolute;
        top: 100px;
        left: 0;
        bottom: 0;
    }
</style>

<body>
    <div class="father">
        <!-- <div class="son"></div>
        <div class="son2"></div> -->

    </div>



</body>

<script>
    const content = document.getElementsByClassName('father')

    content[0].onmousemove = show(function(){  //此处show()函数的调用,this指向的是window,应为函数是定义在window中的
        console.log(this)
    },1000)

    function show(fn,delay) {
        console.log('show',this)
        let turn = true
        return function() {   //此处是闭包返回的函数,由dom元素的调用,所以this为dom元素
            console.log('inner',this)
            if(!turn) {
                return false
            }   
            turn = false
            setTimeout(()=>{
                console.log('inner2',this)
                // fn.apply(this,arguments)
                fn()              //fn函数是定义在show函数的第一个参数,为匿名函数.如果将其单独写出来就是在window执行上下文中,所以此处执行函数.在回调函数中是拿不到跟dom相关的东西的
                                    //使用.apply或者call()将函数定义到dom元素下
                                    //也可以通过参数传值的方式将event传递过去
            },delay)
        }
    }




</script>

</html>